<template>
    <div class="stepBar">
        <div class="stepBar_top">
            <StepBarTitle v-if="stepBarTitle" :title="stepBarTitle" />
        </div>
        <div class="stepBar_box">
            <StepBarHome v-for="(item, index) in data" :key="index" :row="item" :index="index" :langth="data.length"
                :auditStatus="auditStatus" :status="status" />
            <div class="stepBar_noData" v-if="!data || !data.length">暂无数据</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import StepBarTitle from './stepBarTitle.vue'
import StepBarHome from './stepBarHome.vue'
const props = defineProps(['stepBarTitle', 'data', 'auditStatus', 'status'])


</script>

<style lang="less" scoped>
.stepBar {
    .stepBar_top {
        padding: 0 5px;
    }

    .stepBar_box {
        background: #fff;
        border-radius: 5px;
        padding: 15px;
        box-sizing: border-box;

        .stepBar_noData {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: center;
            font-size: 14px;
            color: #ccc;
        }
    }
}
</style>